<template>
  <div class="login-wrap">
    <el-form
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm login-container"
      label-position="left"
      ref="ruleForm"
    >
      <h2 class="title">登录</h2>
      <div class="inputlabel">
        <el-form-item prop="username">
          <el-input
            auto-complete="off"
            placeholder="工号"
            prefix-icon="el-icon-user"
            type="text"
            v-model="ruleForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            auto-complete="off"
            placeholder="密码"
            prefix-icon="el-icon-lock"
            type="password"
            v-model="ruleForm.password"
          ></el-input>
        </el-form-item>
      </div>
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button
          :loading="logining"
          @click="submitForm('ruleForm')"
          style="width:120px;margin-left:120px;"
          type="primary"
        >登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script type="text/ecmascript-6">
    import {login} from "../api/userMG";
    import {getCookie} from "../utils/util";

    export default {
        name: "login",
        data() {
            return {
                //定义loading默认为false
                logining: false,
                // 记住密码
                rememberpwd: false,
                ruleForm: {
                    //username和password默认为空
                    username: "",
                    password: "",
                    randomStr: ""
                },
                //rules前端验证
                rules: {
                    username: [{required: true, message: "请输入账号", trigger: "blur"}],
                    password: [{required: true, message: "请输入密码", trigger: "blur"}]
                }
            };
        },
        // 创建完毕状态(里面是操作)
        created() {
            this.$message({
                message: "欢迎使用丰比特！",
                type: "success"
            });
            // 获取存在本地的用户名密码
            this.getuserpwd();
        },
        // 里面的函数只有调用才会执行
        methods: {
            // 获取用户名密码
            getuserpwd() {
                if (getCookie("user") != "" && getCookie("pwd") != "") {
                    this.ruleForm.username = getCookie("user");
                    this.ruleForm.password = getCookie("pwd");
                    this.rememberpwd = true;
                }
            },
            //获取info列表
            submitForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.logining = true;
                        // 测试通道，不为空直接登录
                        setTimeout(() => {
                            this.logining = false;
                            this.$store.commit("login", "true");
                            this.$router.push({path: "/system/Home"});
                        }, 1000);
                        // 注释
                        // login(this.ruleForm).then(res => {
                        //   if (res.success) {
                        //     if (this.rememberpwd) {
                        //       //保存帐号到cookie，有效期7天
                        //       setCookie('user', this.ruleForm.username, 7)
                        //       //保存密码到cookie，有效期7天
                        //       setCookie('pwd', this.ruleForm.password, 7)
                        //     } else {
                        //       delCookie('user')
                        //       delCookie('pwd')
                        //     }
                        //     //如果请求成功就让他2秒跳转路由
                        //     setTimeout(() => {
                        //       this.logining = false
                        //       // 缓存token
                        //       localStorage.setItem('logintoken', res.data.token)
                        //       // 缓存用户个人信息
                        //       localStorage.setItem('userdata', JSON.stringify(res.data))
                        //       this.$store.commit('login', 'true')
                        //       this.$router.push({ path: '/system/Home' })
                        //     }, 1000)
                        //   } else {
                        //     this.$message.error(res.msg)
                        //     this.logining = false
                        //     return false
                        //   }
                        // })
                    } else {
                        this.$message.error("请输入用户名密码！");
                        this.logining = false;
                        return false;
                    }
                });
            }
        }
    };
</script>

<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100% 100%;
    background-image: url("../assets/img/bg00.jpg");
    -moz-background-size: 100% 100%;
  }

  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 360px;
    padding: 0px 0px 15px 0px;
    background: rgba(70, 122, 129, 0.473);
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }

  .title {
    margin: 0px auto 60px auto;
    min-height: 80px;
    line-height: 80px;
    text-align: center;
    color: #505458;
    background-color: rgb(131, 206, 231);
  }

  .inputlabel {
    margin-left: 40px;
    margin-bottom: 60px;
    width: 280px;
    border-radius: 10px;
  }

  .input {
    margin-bottom: 60px;
    height: 60px;
    background-color: antiquewhite;
  }

  .remember {
    color: black;
    margin: 0px 0px 35px 40px;
  }
</style>
